<template>
  <div class="shopcar-item">
    <div class="header-edit">
      <a href="javascript:void(0);"> 编辑</a>
    </div>
      <div>
          <div class="all-check">
              <span><van-checkbox v-model="checked_all" icon-size="0.16rem" checked-color="#FF4A42" @click="toggleAll()"></van-checkbox></span>
              <i></i>
              <a href="javascript:void(0)">官方店铺</a>
          </div>
          <ul>
            <van-checkbox-group v-model="result" ref="checkboxGroup">
              <li class="shopcar-li" v-for="(item,key) in list" :key="key">
                  <div class="carone" >
                    
                    <div class="good-check ">
                    <span><van-checkbox v-model="item.active" :name="key" icon-size="0.16rem" checked-color="#FF4A42"></van-checkbox></span>
                    </div>
                    <div class="shop-img">
                      <a href="javascript:void(0)"> <img :src="item.img" alt=""></a>
                    </div>
                    <div class="shop-name">
                      <a href="javascript:void(0)">{{item.title}}</a>
                    </div>
                  </div>
                  <ul>
                    <li class="cartwo">
                      <div class="good-check check-item">
                      </div>
                      <div class="shopcar-info">
                        <a href="javascript:void(0)"> {{item.introduction}}</a>
                        <div class="goods-price">
                            <em>￥
                              <strong data-goods-item-price="">{{item.price}}</strong>
                            </em>&nbsp;/&nbsp;件
                        </div>
                      </div>
                      <div>
                        <van-stepper v-model="item.count"  />
                      </div>
                    </li>
                  </ul>
              </li>
            </van-checkbox-group>
          </ul>
          <dl class="all-price">
            <dd >
              <span class="price-span1">共<em class="price-em1">{{Object.keys(this.list).length}}</em>种<em class="price-em2">{{ totalCount }}</em>件 </span>
              <span class="price-span2">￥<em>{{ totalPrice.toFixed(2) }}</em></span>
            </dd>
          </dl>

          <div class="shopcar-checkout">
            <div class="checkout-inp">
              <span><van-checkbox v-model="checked_all" @click="toggleAll()" icon-size="0.14rem" checked-color="#FF4A42">全选</van-checkbox></span>
            </div>
            <div class="checkout-sub">
              <a href="javascript:void(0)">去结算</a>
            </div>
            <div class="checkout-pri"><span>合计：<em>￥<i>{{ totalPrice.toFixed(2) }}</i></em></span><span>(不含运费)</span></div>
          </div>
      </div>

      
  </div>
</template>

<script>
import Vue from 'vue';
import { Checkbox, CheckboxGroup ,Stepper  } from 'vant';

import { mapState } from 'vuex'
 
Vue.use(Checkbox);
Vue.use(CheckboxGroup);
Vue.use(Stepper);
export default {
    data() {
        return {
        checked: true,
        value:[],
        checked_all : false,
        result: [],
        };
    },
    computed: {
      ...mapState('products' , {
          list:'list'
      }),
      totalCount(){
        return Object.values(this.list).reduce((Count,item,index)=>{
          return Count + item.count
        },0)
      },
      totalPrice(){
        return Object.values(this.list).reduce((Count,item,index)=>{
          if(item.active){Count += item.count * item.price}
          return Count
        },0)
      }
    },
    watch:{
      result(){
        for(let i in this.list){
          this.list[i].active = false
        }
        this.result.map(item => {
          this.list[item].active = true
        })
      }
    },
    mounted(){
      for(let item in this.list){
        if(this.list[item].active){
          this.result.push(item)
        }
      }
    },
    methods:{
      toggleAll() {
        if(this.checked_all){
          this.$refs.checkboxGroup.toggleAll(true);
        }else{
          this.$refs.checkboxGroup.toggleAll(false);
        }
      },
    }
}
</script>

<style lang="stylus" scoped>
.shopcar-item 
  border  solid #EEE
  margin 0.01rem
.all-check
  z-index 1 
  display block 
  height 0.49rem 
  padding 0.13rem 0 
  background-color #FAFAFA 
  font-size 0.13rem 
  line-height 0.49rem 
  border-bottom 1px solid #eee 
  display flex
  align-items center
  span 
    padding: 0 0.1rem 0 0.1rem;
  i 
    display inline-block 
    width 0.13rem 
    height 0.13rem 
    vertical-align top 
    margin 0.02rem 0.04rem 0 0 
    background url(https://api.10street.cn/wap/images/store_b.png) no-repeat 50% 50% 
    background-size 90% 
  a 
    color  #212121
.shopcar-li
  position relative
  padding: 0.12rem 0;
  border-bottom  0.01rem solid #EEE
  .shop-name
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp:2;
    -webkit-box-orient: vertical;
  .carone
    height 0.8rem
    margin-top 0.1rem
    padding-right 0.05rem
    .shop-img
      width 0.8rem
      height 0.8rem
      float left
      margin-left 0.1rem
      margin-right 0.2rem
      img 
        width 100%
  .shop-name
    font-size 0.15rem
    a 
      color #151517
.cartwo
  position relative
  padding  0.12rem 0.12rem 0.05rem 0.12rem
  margin  0.06rem 0.12rem 0 0.45rem
  background  #f5f5f5
  font-size  0.12rem
  /* line-height  0.01rem */
  color  #848689
.good-check
  padding 0 0.04rem 0 0.11rem
  float left
  margin-top 0.2rem
.check-item
  position absolute
  left -0.45rem
  /* top 0.42rem */
.van-stepper
  position absolute
  right 0.1rem
  top 0.1rem
  border 0.01rem solid  #CCC 
.shopcar-info
  width 65%
  line-height: 0.24rem;
  a 
    color #848689
  .goods-price 
    em
      color #ff4a42
.all-price
  dd 
    text-align: right
    padding 0.1rem 0.12rem
    font-size 0.14rem
    .price-span2
      color  #ff4a42
        
  em
    padding 0 0.02rem
    font-size 0.16rem
.shopcar-checkout
  position fixed
  z-index 1
  bottom  0.5rem
  width 100%
  left 0
  background #fff
  height 0.5rem   
  line-height  0.5rem 
  border 0.01rem solid  #EEE  
  .checkout-inp
    float left
    margin-top 0.17rem
    margin-left 0.11rem
  .checkout-pri
    float right 
    margin-right 0.05rem
    em 
      font-size 0.18rem
      color #ff4a42
      margin-right 0.1rem
  .checkout-sub
    display  block 
    float  right 
    width  30% 
    background-color  #BBB 
    text-align center
    height 100%
    a 
      font-size  0.2rem 
      color  #FFF 
.header-edit
   width: 0.5rem;
   
   position absolute
   z-index 2
   top 0.12rem
   right 0
   a 
     color: #232326
     font-size 0.14rem
</style>

<style lang="stylus" >
.van-stepper__minus
  background #FAFAFA
.van-stepper__plus
  background #FAFAFA
.van-stepper__input
  background #fff
</style>